<template>
	<view class="container">
		<view class="select-box">
			<view class="title">
				选择充值金额
			</view>
			<view class="list">
				<view class="item" :class="index==0 ? 'select':''" v-for="(item,index) in 6" :key="index">
					<view class="num">
						200元
					</view>
					<view class="text">
						送88元优惠券包
					</view>
				</view>
			</view>
		</view>
		
		<view class="ZS-box">
			<view class="tip-r">
				有效期6个月
			</view>
			<view class="title">
				充值200元获得88元券
			</view>
			<view class="scroll-box">
				<scroll-view scroll-x="true" >
					<view class="c-list">
						<view class="c-item" v-for="(item,i) in 8" :key="i">
							<text>15元 X 1张</text>
							<view class="t">
								全场通用
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="pay-type">
			<view class="left">
				<image :src="$img_path('/pagesMine/4.png')" mode="widthFix"></image>
				<text>第三方支付</text>
			</view>
			<view class="right">
				<image v-if="true" :src="$img_path('/mall/18.png')" mode="widthFix"></image>
				<image v-else :src="$img_path('/mall/19.png')" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="bottom-btn">
			<view class="b-btn">
				<view class="b">
					<button>立即支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 0 22rpx;
	box-sizing: border-box;
	.select-box{
		margin-top: 20rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
		}
		.list{
			margin-top: -4rpx;
			width: calc(100% + 30rpx);
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item{
				width: calc(33.3% - 34rpx);
				height: 144rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #EFEFEF;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 20rpx;
				margin-right: 30rpx;
				.num{
					font-weight: bold;
					font-size: 40rpx;
					color: #333333;
					line-height: 56rpx;
				}
				.text{
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
					margin-top: 10rpx;
				}
				&.select{
					background: linear-gradient( 180deg, #FFA233 0%, #FB4C4C 100%);
					.num{
						color: #FFFFFF;
					}
					.text{
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	.ZS-box{
		margin-top: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #EFEFEF;
		padding: 28rpx 20rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		.tip-r{
			position: absolute;
			right: 0;
			top: 0;
			padding: 6rpx 10rpx;
			background: linear-gradient( 96deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 0rpx 20rpx 0rpx 20rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
		}
		.title{
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
		}
		.scroll-box{
			width: 100%;
			scroll-view{
				width: calc(100% + 50rpx);
				
			}
			.c-list{
				width: 900rpx;
				display: flex;
				flex-wrap: wrap;
				padding-top: 14rpx;
				
				.c-item{
					width: 200rpx;
					height: 140rpx;
					background: #F8F8F8;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #EFEFEF;
					margin-right: 20rpx;
					margin-top: 20rpx;
					position: relative;
					&>text{
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						display: block;
						padding: 24rpx;
						box-sizing: border-box;
						text-align: center;
					}
					&>view{
						width: 100%;
						background: #E72A2A;
						border-radius: 0rpx 0rpx 16rpx 16rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 52rpx;
						position: absolute;
						bottom: 0;
						text-align: center;
					}
				}
			}
		}
	}
	
	.pay-type{
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #EFEFEF;
		padding: 24rpx 20rpx 20rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			text{
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				margin-left: 14rpx;
			}
		}
		.right{
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.bottom-btn{
		width: 100%;
		height: calc(136rpx + constant(safe-area-inset-bottom));
		height: calc(136rpx + env(safe-area-inset-bottom));
		
		.b-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.b{
				padding: 20rpx 22rpx;
				box-sizing: border-box;
				button{
					height: 96rpx;
					background: linear-gradient( 132deg, #FFA233 0%, #FB4C4C 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
				}
			}
		}
	}
}
</style>
